<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow Jump">
			<div>
				<h4>PC端事件</h4>
				<div class="Table">
					<div class="TableRow">
						<a class="RowLeft" href="#onclick">onclick</a>
						<span class="RowRight">单击</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#ondblclick">ondblclick</a>
						<span class="RowRight">双击</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onfocus">onfocus</a>
						<span class="RowRight">获得焦点</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onblur">onblur</a>
						<span class="RowRight">失去焦点</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onresize">onresize</a>
						<span class="RowRight">窗口或框架被重新调整大小</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onchange">onchange</a>
						<span class="RowRight">内容被改变</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onkeydown">onkeydown</a>
						<span class="RowRight">键盘按键被按下</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onkeypress">onkeypress</a>
						<span class="RowRight">键盘按键被按下并松开</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onkeyup">onkeyup</a>
						<span class="RowRight">键盘按键被松开</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onmousedown">onmousedown</a>
						<span class="RowRight">鼠标按钮被按下</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onmousemove">onmousemove</a>
						<span class="RowRight">鼠标被移动</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onmouseout">onmouseout</a>
						<span class="RowRight">鼠标从某元素移开</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onmouseover">onmouseover</a>
						<span class="RowRight">鼠标移到某元素之上</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onmouseup">onmouseup</a>
						<span class="RowRight">鼠标按键被松开</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onabort">onabort</a>
						<span class="RowRight">图像的加载被中断</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onerror">onerror</a>
						<span class="RowRight">加载文档或图像时发生错误</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onload">onload</a>
						<span class="RowRight">页面或图像完成加载</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onreset">onreset</a>
						<span class="RowRight">重置按钮被点击</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onselect">onselect</a>
						<span class="RowRight">文本被选中</span>
					</div>
					<div class="TableRow">
						<a class="RowLeft" href="#onsubmit">onsubmit</a>
						<span class="RowRight">确认按钮被点击</span>
					</div>
				</div>
				<pre>
	//兼容IE8以下浏览器attachEvent
	//IE9以及主流浏览器addEventListener
	function EventHandle(node,type,callback){
		if(window.addEventListener){
			node.addEventListener(type,callback);
		}else if(window.attachEvent){
			node.attachEvent("on"+type,callback);
		}else{
			node["on"+type]=callback();
		}
	}				
				</pre>
				<pre>
	var elms=document.querySelector('elms')				
	var eventsCallBack=function(e){
		console.log("点击了一下");  
		console.log(e.target.value);
	}
	EventHandle(elms,"blur",eventsCallBack)
	等价=>elms.EventHandle("blur",eventsCallBack)		
		
	elms.addEventListener("focus",eventsCallBack)
	elms.removeEventListener("focus",eventsCallBack)	//取消监听事件
				</pre>
			</div>
			<div>
				<h4 id="onclick">click</h4>
				<pre>
	elms.click=()=>{
		console.log("点击了一下")
	}			
	elms.addEventListener("click",eventsCallBack)
	<button type="button" id="clickMe">点我</button>
				</pre>
			</div>
			<div>
				<h4 id="onfocus">focus</h4>
				<pre id="onchange">
	&lt; input type="text" onfocus="eventsCallBack()"/&gt;			
	var input = document.querySelector('input')
	input.onblur=function(){
		alert("失去焦点")
	}	
	input.oninput=function(){
		console.log("change")
	}
	eelms.addEventListener("focus",eventsCallBack)
	elms.removeEventListener("focus",eventsCallBack)	//取消监听事件
	<input type="text" name="" id="caicc" value="" />
	<script type="text/javascript">
		var input = document.querySelector('#caicc' )
		input.onblur=function(){
			alert("失去焦点")
			alert("输入值:"+input.value)
		}
		input.oninput=function(){
			console.log("change")
		}
	</script>				
				</pre>
			</div>
			<div>
				<h4 id="onblur">blur</h4>
				<pre>
	elms.addEventListener("blur",eventsCallBack)
	elms.removeEventListener("blur",eventsCallBack)	
				</pre>
			</div>
			<div>
				<h4 id="onresize">resize</h4>
				<pre>
	请按下F12，改变浏览器窗口大小				
	window.addEventListener("resize",()=>{
		setTimeout(()=>{
			alert("大小变了")
			},2000)
	})
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
	<script type="text/javascript">
		var link =document.querySelectorAll("a")
		position= window.pageYOffset ||document.documentElement.scrollTop
		const clickMe=document.querySelector("#clickMe")
		clickMe.addEventListener("click",()=>{alert("帅，你真帅")})
		window.addEventListener("resize",function(){
			setTimeout(function(){
				alert("大小变了")
			},2000)
		})
	</script>
</body>

</html>